/**
 * 将数值带上单位并返回
 */
export const addUnit = (value: number) => `${value}px`

/**
 * 动态渲染设计器组件的容器样式
 */
export const getWrapperStyle = (styles: Record<string, any>) => {
  if (!styles) return {}

  let result: Record<string, any> = {}
  for (const [key, value] of Object.entries(styles)) {
    switch (key) {
      case 'padding':
        result['paddingTop'] = addUnit(value.top)
        result['paddingBottom'] = addUnit(value.bottom)
        result['paddingLeft'] = addUnit(value.left)
        result['paddingRight'] = addUnit(value.right)
        break
      case 'backgroundColor':
        result['backgroundColor'] = value
        break
      case 'backgroundImage':
        result['backgroundImage'] = `url(${value})`
        break
      case 'fontSize':
        result['fontSize'] = addUnit(value)
        break
      case 'width':
        result['width'] = addUnit(value)
        break
      case 'height':
        result['height'] = addUnit(value)
        break
    }
  }
  return result
}
